<template>
    <div>
        {{baseTrademark}}
    <el-button type="primary" @click="openAddDialog">创建品牌</el-button>
    <el-table
      :data="tradeMarkList"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="tmName"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="logoUrl"
        label="LOGO">
            <template slot-scope="scope">
             <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.logoUrl"></el-image>
            </template>
      </el-table-column>
       <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope_2203A">
                <el-button @click="deleteRow(scope_2203A.row)" type="text" size="small">删除</el-button>
                <el-button @click="openEditDialog(scope_2203A.row.id)" type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageNo"
      :page-sizes="[2, 4, 6, 8]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

<!-- Diglog -->
    <el-dialog
        title="创建品牌"
        :visible.sync="dialogVisible"
        width="30%">
        <el-form :model="baseTrademark" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="baseTrademark.tmName" placeholder="品牌名称"></el-input>
            </el-form-item>
            <el-form-item label="LOGO">
                <el-input v-model="baseTrademark.logoUrl" placeholder="LOGO"></el-input>
            </el-form-item>
            <el-form-item label="LOGO">
                <el-upload
                    class="avatar-uploader"
                    action="http://localhost:18080/admin/product/fileUpload/oss"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="baseTrademark.logoUrl" :src="baseTrademark.logoUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import * as tradeMarkApi from '../../api/gmall/product/trademark'
export default {
    data(){
        return{
            pageNo:1,
            pageSize:2,
            tradeMarkList:[],
            total:0,
            dialogVisible:false,
            baseTrademark:{}
        }
    },
    methods:{
        findPage(){
            tradeMarkApi.tradeMarkPage(this.pageNo,this.pageSize,'').then(res=>{
                console.log(res.data)
                if(res.data.ok){
                    this.tradeMarkList = res.data.data.records;
                    this.total = res.data.data.total;
                }
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.findPage()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.findPage()
        },
        openAddDialog(){
            this.dialogVisible = true;
            this.baseTrademark = {logoUrl:''}
        },
        openEditDialog(id){
            this.dialogVisible = true;

            tradeMarkApi.get(id).then(res=>{
                if(res.data.ok){
                    this.baseTrademark = res.data.data;
                }
            })
        },
        save(){
            tradeMarkApi.save(this.baseTrademark).then(res=>{
                if(res.data){
                    alert(res.data.message)
                    this.dialogVisible = false;
                    this.findPage();
                }
            })
        },
        deleteRow(row){
            console.log("===========",row)
             this.$confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    tradeMarkApi.remove(row.id).then(res=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.findPage();
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleAvatarSuccess(res, file) {
            console.log(res)
            debugger
            if(res.ok){
                //this.$set(this.baseTrademark,'logoUrl',res.data)
                this.baseTrademark.logoUrl = res.data;//没有通过axios发送
            }
        },
    },
    beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
         console.log("beforeCreate")
        // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
    },
    created() { // 这是遇到的第二个生命周期函数
         console.log("created")
        //  在 created 中，data 和 methods 都已经被初始化好了！
        // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
    },
    beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
        console.log("beforeMount")
        // console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
    },
    mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
     console.log("mounted")
        this.findPage();
        // console.log(document.getElementById('h3').innerText)
        // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
    },
    beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】
        /* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 数据是：' + this.msg) */
        //console.log('beforeUpdate')
        // 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
    },
    updated() {
        //console.log('updated数据是：' + this.pageSize)
        // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
    },
    beforeDestroy(){
        //：销毁前，清除页面中的定时器、监听事件
        console.log("清除页面中的定时器、监听事件")
    },
    destroyed(){
        //销毁后，清除页面中的所有
        console.log("销毁后，清除页面中的所有")
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>


